<template>
	<view>
		<view class="cu-dialog">
			<view class="list">
				<image class="head_img" :src="userinfo.avatar || '../../static/image/bg_img.png'"></image>
				<view class="name">{{userinfo.nickname}}</view>
			</view>
			<view class="codes">
				<tki-qrcode
					class="code"
					ref= 'qrcode'
					:val='val'
					:size='size'
					:background = 'background'
					:icon = 'icon'
					:iconSize = 'iconSize'
					:onval = 'onval'
					:loadMake = 'loadMake'
				>
				</tki-qrcode>
			</view>
			<view class="btns">扫描上面的二维码加我</view>
		</view>
	</view>
</template>

<script>
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
	export default {
		components:{
			tkiQrcode
		},
		data() {
			return {
				modalName: null,
				userinfo: '',
				val: '',
				size: 400,
				background: '#fff',
				icon: '',
				iconSize: 45,
				onval: true,
				loadMake: true
			}
		},
		onShow() {
			this.$msgchat.initwork();
		},
		onLoad(){
			this.userinfo = uni.getStorageSync('userinfo');
			if(this.userinfo.avatar){
				this.userinfo.avatar = this.$common.baseUrl + this.userinfo.avatar;
			}
			this.val = this.userinfo.id+',' + '1' ;	
		},
		methods: {
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			}

		}
	}
</script>

<style>
	page {
		/* width: 100vw; */
		background: #F5F4F9;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		
	}

	.list {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 10upx 0;
	}

	.cu-dialog {
		/* margin-top: 20%; */
		padding: 30upx;
		background: #FFF;
		height: 1000upx;
	}
	.head_img {
		width: 120upx;
		height: 120upx;
		border-radius: 50%;
	}

	.name {
		margin-left: 20upx;
	}

	.codes {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 40upx;
	}

	.btns {
		text-align: center;
		padding: 100upx 0 30upx 0;
		color: #5C5C5C;
	}

</style>
